<template>
  <div class="ie-video">
    <div class="ie-video--box">
      <video
        ref="videoRef"
        crossorigin="anonymous"
        @click="playing = !playing"
      />
    </div>
    <div class="ie-video--controls">
      <a-space>
        <a-button-group type="text">
          <a-button v-if="playing" @click="playing = false"><template #icon><icon-pause size="18" /></template></a-button>
          <a-button v-else @click="playing = true"><template #icon><icon-play-arrow size="18" /></template></a-button>
          <a-button v-if="muted" @click="muted = false"><template #icon><icon-mute size="18" /></template></a-button>
          <a-button v-else @click="muted = true"><template #icon><icon-sound size="18" /></template></a-button>
        </a-button-group>
        <span style="padding: 0 10px;">
          <a-slider
            :min="0"
            :max="Math.floor(duration)"
            :style="{ width: '240px' }"
            :format-tooltip="format"
            @change="onChange"
          />
        </span>
        <span>{{ format(currentTime) }} / {{ format(duration) }}</span>
      </a-space>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useMediaControls } from '@vueuse/core'
import { IconPause, IconPlayArrow, IconMute, IconSound } from '@arco-design/web-vue/es/icon'

const props = defineProps({
  src: {
    type: String,
    require: true
  }
})

const videoRef = ref()
const { playing, currentTime, duration, volume, muted } = useMediaControls(videoRef, { 
  src: props.src
})

function format(s) {
  return new Date(1000 * s).toISOString().slice(14, 19)
}

function onChange(v) {
  currentTime.value = v
}

onMounted(() => {
  playing.value = true
  volume.value = .5
})
</script>

<style lang="less">
.ie-video {
  width: 100%;
  height: 0;
  padding-top: 75%;
  padding-bottom: 48px;
  margin-bottom: -24px;
  position: relative;

  &--box {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 48px;
    right: 0;
    background-color: #efefef;

    video {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  }

  &--controls {
    height: 32px;
    padding-top: 8px;
  }
}
</style>